<template>
  <el-color-picker
    v-model="theme"
    :predefine="preDefineColors"
    class="theme-picker"
    popper-class="theme-picker-dropdown"
  />
</template>

<script>
import changeTheme from '@/utils/theme'

export default {
  name: 'theme-picker',
  data () {
    return {
      preDefineColors: [
        '#2784f4',
        '#90ee90',
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#00ced1',
        '#409EFF',
        '#1e90ff',
        '#c71585',
      ],
      theme: this.$store.state.user.theme
    }
  },
  watch: {
    theme (val, oldVal) {
      if (val) {
        this.$store.commit('user/SET_THEME', val)
        changeTheme(val, oldVal || this.$store.state.user.theme)
      }
    }
  }
}
</script>

<style scoped>
::v-deep .theme-message,
::v-deep .theme-picker-dropdown {
  z-index: 99999 !important;
}

.theme-picker ::v-deep .el-color-picker__trigger {
  height: 26px !important;
  width: 26px !important;
  padding: 2px;
}

.theme-picker-dropdown ::v-deep .el-color-dropdown__link-btn {
  display: none;
}
</style>
